<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>fileReader</title>
	<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	<style>
	.well{ word-break: break-all; }
	</style>
</head>
<body>
	<div class="container">
		<div class="page-header">
			To map.
		</div>
		<form>
			<div class="form-group">
				<input class="form-control" type="text" id="path" value="images/">
			</div>
			<div class="form-group">
				<input class="form-control" type="text" id="path2" value="audio/">
			</div>
			<div class="form-group">
				<input class="form-control" type="file" id="file" multiple>
			</div>
			<button type="button" id="btn" class="btn btn-default">生成json</button>
			<button type="button" id="btn2" class="btn btn-default">生成并保存</button>
			<div class="well" style="margin-top:20px;" id="well"></div>
		</form>

	</div>

	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="js/filesaver.min.js"></script>
	<script type="text/javascript">
		var $path = $('#path');
		var $path2 = $('#path2');
		var resourceData;
		function renderJson(files){
			if(files.length <= 0){
				alert('请选择文件！');
				return false;
			}
			if(!resourceData){
				resourceData = {
					IMAGES:[],
					AUDIOS:[],
					// TXTS:[],
					// SCRIPTS:[]
				};
			}
			
			for (var i = 0, f; f = files[i]; i++) {
				console.log(f.type);
				if (f.type.match('image.*')) {
			        resourceData.IMAGES.push($path.val() + f.name);
			    }	
			    if(f.type == "application/javascript"){
			    	resourceData.SCRIPTS.push(
						{
							"source": $path.val() + f.name,
						    "type": "SCRIPT",
						    "size": f.size,
						    "stopExecution": true
						}
					);
			    }		
			    if(f.type == "audio/mp3"){
			    	resourceData.AUDIOS.push($path2.val() + f.name);
			    }		
			    if(f.type == "text/plain"){
			    	resourceData.TXTS.push(
						{
							"source": $path.val() + f.name,
						    "type": "TEXT",
						    "size": f.size
						}
					);
			    }		

			}
		}

		var oDragWrap = document.body;
		//拖进
		oDragWrap.addEventListener('dragenter', function(e) {
		　e.preventDefault();
		}, false);

		//拖离
		oDragWrap.addEventListener('dragleave', function(e) {
		　dragleaveHandler(e);
		}, false);

		//拖来拖去 , 一定要注意dragover事件一定要清除默认事件
		//不然会无法触发后面的drop事件
		oDragWrap.addEventListener('dragover', function(e) {
		　e.preventDefault();
		}, false);

		//扔
		oDragWrap.addEventListener('drop', function(e) {
		　dropHandler(e);
		}, false);

		var dropHandler = function(e) {
			e.preventDefault();

			//获取文件列表
			var files = e.dataTransfer.files;
			//检测是否是拖拽文件到页面的操作
			if (files.length == 0) {return;};
			renderJson(files);		
			// var d = new Date();
			// var blob = new Blob([JSON.stringify(resourceData)], {type: "text/plain;charset=utf-8"});
			// saveAs(blob, "files_"+ d.getTime() +".json");　
			$('#well').html(JSON.stringify(resourceData));
		}

		$('#btn').click(function(event) {
			var files = document.getElementById("file").files;
			renderJson(files);
			console.log(JSON.stringify(resourceData));
		});
		$('#btn2').click(function(event) {
			var files = document.getElementById("file").files;
			renderJson(files);
			
			var d = new Date();
			var blob = new Blob([JSON.stringify(resourceData)], {type: "text/plain;charset=utf-8"});
			saveAs(blob, "files_"+ d.getTime() +".json");
		});

	</script>
</body>
</html>